import React,{ Component } from 'react';

import './DataBase.scss';
import Rect from 'components/widget/index/Rect';
import Turnover from 'components/widget/index/Turnover';
import Chart from 'components/widget/Chart'
import MpUrl from '@/route/getparam';

export default class DataBase extends Component{
	constructor (props) {
		super(props)
		this.state = {
			navList: [
				{ name: '汇总', type: 1 },
				{ name: '昨日', type: 2 },
				{ name: '近7天', type: 3 },
				{ name: '近30天', type: 4 }
			],
			nowType: 1,
      timeType: 1,
      yinshe: {
        browse_card_count: '浏览总量',
        new_caller_count: '客户总量',
        follow_count: '跟进总数',
        save_card_count: '被保存总数',
        forward_card_count: '被转发总数',
        point_count: '被点赞总数'
      }
		}
	}
  componentDidMount () {
    let getUrl = new MpUrl()
    this.setState({
      employee_id: getUrl.get('employee_id')
    })
  }
	changeMyTime (timeType) {
		this.setState({
			nowType: timeType
		})
		this.props.changeTime(timeType)
	}
  render() {
  	let numberData = []
  	Object.keys(this.props.data.part_one).forEach((item, index) => {
      numberData.push({
        name: this.state.yinshe[item],
        number: this.props.data.part_one[item]
      })
    })
    return ( 
      <div>
        <div className="switch-tap">
        	{
        		this.state.navList.map((item, index) => {
        			return(
        				<div onClick={this.changeMyTime.bind(this, item.type)} className={item.type === this.state.nowType ? 'active' : ''} key={index}>{item.name}</div>
        			)
        		})
        	}
        </div>
        <div className="rect-group">
          {
            numberData.map((item, index) => {
              return (
                <Rect data={item} key={index}/>
              )
            })
          }
        </div>
        <div className="turnover-ratio">
        	<Turnover data={this.props.data.expectData} params={{employee_id: this.state.employee_id}}/>
        </div>
        <div className='client'>
        	<Chart name='客户兴趣占比' type='pie'   data={this.props.data.browseData} myclassName='chart5'/>
          <Chart name='近两周活跃度' type='line' data={this.props.data.part_two.total_number} time={this.props.data.part_two.time} myclassName='chart1'/>
        </div>
      </div>
    )
  }
}
